define(function () {
    var TableColCollapse = {
        name: 'table-col-collapse',
        template: ''
        + '<div @click="handleCollapse">'
        + '<span style="display: inline-block;width: 25px;text-align: left" :style="{ marginLeft: indentPx }"><i v-if="showArrow" class="icon-arrow-down"></i></span>'
        + '<slot></slot>'
        + '</div>',
        props: {
            params: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            tableData: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            originTableData: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            equalsKey: String
        },
        watch: {
            // tableData: function (val) {
            //     console.log(val)
            // }
        },
        data: function () {
            return {
                isCollapse: false,
                indentPx: 0
            };
        },
        computed: {
            showArrow: function () {
                var row = this.params.row;
                return row.hasOwnProperty('children') && Array.isArray(row.children) && row.children.length
            }
        },
        created: function () {
            this.indentPx = this.getParentNumber(this.originTableData, this.params.row.num) * 40 + 'px';
        },
        methods: {
            handleCollapse: function () {
                var key = this.equalsKey;
                for (var i = 0; i < this.tableData.length; i++) {
                    if (this.tableData[i][key] === this.params.row[key]) {
                        var children = this.tableData[i].children;
                        var tempArr = this.tableData.slice(); // deep copy array

                        if (!this.tableData[i].hasOwnProperty('isCollapse')) {
                            this.tableData[i].isCollapse = false;
                        }

                        if (this.tableData[i].isCollapse) {
                            tempArr.splice(i + 1, this.getTreeLength(children));
                        } else {
                            this.renderChildren(tempArr, children, i);
                        }

                        this.tableData[i].isCollapse = !this.tableData[i].isCollapse;
                        this.$emit('table-data-change', tempArr);
                    }
                }
            },
            getTreeLength: function (data) {
                var treeNodeLength = 0;
                for (var i = 0; i < data.length; i++) {
                    treeNodeLength++;
                    if (data[i].hasOwnProperty('children') && data[i].isCollapse) {
                        treeNodeLength += this.getTreeLength(data[i].children);
                    }
                }
                return treeNodeLength;
            },
            getParentNumber: function (data, currentNum) {

                var getNumber = function (data, currentNum) {
                    var res = {
                        number: 0,
                        flag: false
                    };
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].num === currentNum) {
                            res.flag = true;
                            break;
                        } else if (data[i].hasOwnProperty('children')) {
                            var nextRes = getNumber(data[i].children, currentNum);
                            if (nextRes.flag) {
                                res.flag = true;
                                res.number = ++nextRes.number;
                                break;
                            }
                        }
                    }

                    return res;
                }

                return getNumber(data, currentNum).number;
            },
            renderChildren: function (data, children, startIndex) {
                for (var i = 0; i < children.length; i++) {
                    data.splice(i + 1 + startIndex, 0, children[i]);
                    if (children[i].hasOwnProperty('children') && children[i].isCollapse) this.renderChildren(data, children[i].children, startIndex + i + 1);
                }
            }
        }
    }
    return TableColCollapse
})
